<!doctype html>
<html>
    <head>
        <title>HT 对话框手册</title>
        <meta charset="UTF-8">    
        <meta name="viewport" content="user-scalable=yes, width=1024">
        <style type="text/css"> 
            h1, h2, h3, h4, h5, h6, p, blockquote {
                margin: 0;
                padding: 0;
            }
            body {
                font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
                font-size: 13px;
                line-height: 18px;
                color: #737373;
                background-color: white; 
                margin: 10px 13px 10px 13px;
            }
            table {
                margin: 10px 0 15px 0;
                border-collapse: collapse;
            }
            td,th {	
                border: 1px solid #ddd;
                padding: 3px 10px;
            }
            th {
                padding: 5px 10px;	
            }
            a {
                color: #0069d6;
            }
            a:hover {
                color: #0050a3;
                text-decoration: none;
            }
            a img {
                border: none;
            }
            p {
                margin-bottom: 9px;
            }
            h1, h2, h3, h4, h5, h6 {
                color: #404040;
                line-height: 36px;
            }
            h1 {
                margin-bottom: 18px;
                font-size: 30px;
            }
            h2 {
                font-size: 24px;
            }
            h3 {
                font-size: 18px;
            }
            h4 {
                font-size: 16px;
            }
            h5 {
                font-size: 14px;
            }
            h6 {
                font-size: 13px;
            }
            hr {
                margin: 0 0 19px;
                border: 0;
                border-bottom: 1px solid #ccc;
            }
            blockquote {
                padding: 13px 13px 21px 15px;
                margin-bottom: 18px;
                font-family:georgia,serif;
                font-style: italic;
            }
            blockquote:before {
                content:"\201C";
                font-size:40px;
                margin-left:-10px;
                font-family:georgia,serif;
                color:#eee;
            }
            blockquote p {
                font-size: 14px;
                font-weight: 300;
                line-height: 18px;
                margin-bottom: 0;
                font-style: italic;
            }
            code, pre {
                font-family: Monaco, Andale Mono, Courier New, monospace;
            }
            code {
                background-color: #fee9cc;
                color: rgba(0, 0, 0, 0.75);
                padding: 1px 3px;
                font-size: 12px;
                border-radius: 3px;
            }
            pre {
                display: block;
                padding: 14px;
                margin: 0 0 18px;
                line-height: 16px;
                font-size: 11px;
                border: 1px solid #d9d9d9;
                white-space: pre-wrap;
                word-wrap: break-word;
            }
            pre code {
                background-color: #fff;
                color:#737373;
                font-size: 11px;
                padding: 0;
            }
            sup {
                font-size: 0.83em;
                vertical-align: super;
                line-height: 0;
            }
            * {
                -webkit-print-color-adjust: exact;
            }
            @media screen and (min-width: 914px) {
                body {
                    width: 854px;
                    margin:10px auto;
                }
            }
            @media print {
                body,code,pre code,h1,h2,h3,h4,h5,h6 {
                    color: black;
                }
                table, pre {
                    page-break-inside: avoid;
                }
            }                        
            iframe{
                width: 100%;
                border: 1px solid #34495E;
                margin: 0;                
            }            
            .logo{
                vertical-align: middle;
            }

        </style>        
        <script>
            function init() {
                var logoSrc = '',
                    logos = document.querySelectorAll('.logo'),
                    i = 0;
                for (; i < logos.length; i++) {
                    logos[i].src = logoSrc;
                }
                
                var iframes = document.querySelectorAll('iframe'),
                    func = function(){};
                for (i=0; i < iframes.length; i++) {
                    var iframe = iframes[i];
                    
                    // a small hack to make it work on android
                    iframe.ontouchstart = func;
                    
                    var div = document.createElement('div');
                    div.innerHTML = '<a href="' + iframe.src + '" target="_blank">独立运行→</a>';
                    iframe.parentNode.insertBefore(div, iframe);
                }   
            }
        </script>    
    </head>
    <body onload="init();">
        <a href="http://www.hightopo.com"><img class="logo"></a>HT 对话框手册
        <hr style="margin: 1px 0 20px 0">
<p>索引</p>

<ul><li><a href="#ref_description">概述</a></li><li><a href="#ref_sample">简单示例</a></li><li><a href="#ref_customstyle">自定义对话框样式</a></li><li><a href="#ref_interactive">与对话框交互</a></li></ul>

<hr/>

<div id="ref_description"></div>

<h3>概述</h3>

<p><code>ht.widget.Dialog</code>是一个可灵活配置的模态对话框插件，可配置高度、宽度、内容，样式等，支持在一个页面中创建多个实例，
适合于创建：登录框，注册框，警告对话框等。
在正式使用<code>API</code>之前，您的页面里需要引入相关的<code>js</code>文件：</p>

<pre><code>&lt;script src=&quot;ht.js&quot;&gt;&lt;/script&gt; &lt;!--先引入ht.js--&gt;
&lt;script src=&quot;ht-cssanimation.js&quot;&gt;&lt;/script&gt; &lt;!--依赖cssanimation插件--&gt;
&lt;script src=&quot;ht-form.js&quot;&gt;&lt;/script&gt; &lt;!--依赖form插件--&gt;
&lt;script src=&quot;ht-dialog.js&quot;&gt;&lt;/script&gt;</code></pre>

<p><code>Dialog</code>提供的<code>API</code>如下：</p>

<ul><li><code>setConfig(config)</code> 参数<code>config</code>是一个<code>js</code>对象，用于配置对话框的标题，尺寸，内容等。可配置的参数如下：<ul><li><code>title</code> 对话框的标题</li><li><code>closable</code> 可选值为<code>true/false</code>，表示是否显示关闭按钮</li><li><code>maximized</code> 将对话框最大化</li><li><code>maximizable</code> 可选值为<code>true/false</code>，表示对话框是否可被最大化</li><li><code>draggable</code> 指定对话框是否可拖拽调整位置，可选值为<code>true/false</code></li><li><code>position</code> 指定对话框的的位置，默认为字符串<code>center</code>，也可以通过一个对象格式指定<code>x</code>、<code>y</code>坐标：<code>{x: 0, y: 0}</code></li><li><code>resizeMode</code> 鼠标移动到对话框右下角可改变对话框的大小，此参数控制<code>resize</code>模式：<code>w</code>表示只调整宽度，<code>h</code>表示只调整高度，<code>wh</code>表示宽高都可调整，<code>none</code>表示不可调整宽高</li><li><code>content</code> 指定对话框的内容，可以是<code>html</code>文本，或<code>DOM</code>对象，或<code>HT</code>组件对象（自动调用其<code>invalidate</code>）</li><li><code>contentPadding</code> 对话框内容区域的内边距</li><li><code>width</code> 指定对话框的宽度，如果为空，则取<code>content</code>的<code>offsetWidth</code>。由于<code>HT</code>组件对象没有自有宽度，所以必须指定<code>width</code>属性</li><li><code>height</code> 指定对话框的高度，如果为空，则取<code>content</code>的<code>offsetHeight</code>。由于<code>HT</code>组件对象没有自有高度，所以必须指定<code>height</code>属性</li><li><code>borderWidth</code> 对话框的边框宽度</li><li><code>titleBackground</code> 指定标题栏的背景色</li><li><code>titleColor</code> 指定标题栏文字的颜色</li><li><code>titleIcon</code> 标题栏图标</li><li><code>titleAlign</code> 标题文本对齐方式，可选值为<code>left/right/center</code></li><li><code>buttons</code> 指定对话框按钮组内容。参数为一个数组，数组内的元素格式为<code>{label: &#39;label&#39;, className: &#39;class&#39;, action: function(button, event) { }}</code>，其中<code>className</code>指定按钮的样式名称，用于自定义按钮样式
，<code>action</code>为回调函数，当此按钮被当点击时，回调函数会执行</li><li><code>buttonsAlign</code> 指定对话框按钮的对齐方式，可选值为<code>left/right/center</code></li><li><code>action</code> 全局回调函数，当点击按钮时，单个按钮的回调函数执行完成后再执行此全局回调函数，参数为函数，格式为：<code>function(button, event) { }</code>，<code>button</code>为点击的按钮，<code>event</code>为原生的事件对象(一般为<code>MouseEvent</code>)</li></ul></li><li><code>setSize(width, height)</code> 设置对话框的宽度和高度</li><li><code>isShowing()</code> 返回此对话框是否显示</li><li><code>maximize()</code> 最大化对话框</li><li><code>restore()</code> 与<code>maximize</code>对应，恢复对话框</li><li><code>show()</code> 显示对话框</li><li><code>hide()</code> 隐藏对话框</li><li><code>setTitle(newTitle)</code> 设置新的对话框标题</li><li><code>getView()</code> 返回对话框的视图<code>div</code></li><li><code>onShown</code> 回调函数，对话框显示以后回调</li><li><code>onHidden</code> 回调函数，对话框隐藏以后回调</li><li><code>addEventListener(listener)</code> 增加事件监听器，参数为监听函数，派发的事件种类可以查看<code>简单示例</code>中的<code>Demo</code></li><li><code>removeEventListener(listener)</code> 删除事件监听器，参数为监听函数</li></ul>

<div id="ref_sample"></div>

<h3>简单示例</h3>

<p>接下来看一个简单的例子：</p>

<p><iframe src="examples/example_dialog.html" style="height:350px"></iframe></p>

<pre><code>dialog.setConfig({
    itle: &quot;title&quot;,
    titleIcon: &#39;node_image&#39;, //ht内部注册的图片名
    content: graph,
    width: 250,
    height: 250,
    draggable: true,
    closable: true,
    maximizable: true,
    resizeMode: &quot;wh&quot;,
    buttons: [{
        label: &quot;Close&quot;,
        action: function(button, e) {
            dialog.hide();
        }
    }],
    buttonsAlign: &quot;center&quot;,
    action: function(item, e) {
        console.log(item, e);
    }
});</code></pre>

<div id="ref_customstyle"></div>

<h3>自定义对话框样式</h3>

<p>除了<code>概述章节</code>里提到配置参数，面板还支持使用全局的<code>htconfig</code>对象配置整体风格，可配置的参数如下：</p>

<ul><li><code>Color.titleIconBackground</code> 指定<code>HT</code>所有组件的标题<code>ICON</code>的颜色，如面板，对话框，<code>AccordionView</code>等</li><li><code>Color.titleBackground</code> 指定<code>HT</code>所有组件的标题栏的背景色，如面板，对话框，<code>AccordionView</code>等</li><li><code>Color.headerBackground</code> 指定<code>HT</code>所有组件的<code>header</code>背景色，如表格表头、工具条等</li><li><code>Default.dialogTitleLabelColor</code> 指定对话框标题栏的文字颜色，默认为<code>Default.labelSelectColor</code></li><li><code>Default.dialogTitleLabelFont</code> 指定对话框标题栏的文字字体，默认为<code>Default.labelFont</code></li><li><code>Default.dialogTitleBackground</code> 指定对话框标题栏的背景色，默认为<code>Color.titleBackground</code></li><li><code>Default.dialogHeaderBackground</code> 指定对话框底部按钮栏的背景色，默认为<code>Color.headerBackground</code></li><li><code>Default.dialogContentLabelFont</code> 指定对话框内容区域的文字字体</li><li><code>Default.dialogButtonBackground</code> 指定对话框底部按钮的背景色</li><li><code>Default.dialogButtonSelectBackground</code> 指定对话框底部按钮被按下时的背景色</li><li><code>Default.dialogButtonLabelColor</code> 指定对话框底部按钮文本的颜色</li><li><code>Default.widgetTitleHeight</code> 指定对话框标题栏的高度</li></ul>

<p><iframe src="examples/example_customstyle.html" style="height:200px"></iframe></p>

<pre><code>&lt;script&gt;
    htconfig = {
        Color: {
            titleBackground: &#39;#076186&#39;,
            titleIconBackground: &#39;white&#39;,
            headerBackground: &#39;#DAECF4&#39;
        },
        Default: {
            dialogButtonBackground: &#39;rgb(231, 76, 60)&#39;,
            dialogButtonSelectBackground: &#39;rgb(196, 65, 51)&#39;,
            dialogButtonLabelColor: &#39;#fff&#39;
        }
    };
&lt;/script&gt;</code></pre>

<div id="ref_customstyle2"></div>

<div id="ref_interactive"></div>

<h3>与对话框交互</h3>

<p>许多场景里，对话框不仅仅用来展示内容，有时也会放置表单收集用户输入的信息。我们可以利用浏览器提供的<code>querySelector</code>方法查询获得对话框中的<code>DOM</code>对象然后进行操作。
下面的例子演示这个交互过程：</p>

<p><iframe src="examples/example_interactive.html" style="height:200px"></iframe></p>

<p>实现原理可以查看示例的源代码。</p>    <hr id="contact" style="margin: 20px 0 1px 0">
    <a href="http://www.hightopo.com"><img class="logo"></a>欢迎交流 <a href="mailto:service@hightopo.com">service@hightopo.com</a>
</body>
</html>
